<template>
    <div class="package">
        <p>圆周运动</p>
        <div class="circleTrack">
            <div class="circle" ref="circle"></div>
        </div>

    </div>
</template>

<script>
    export default {
        mounted() {
            var circle = this.$refs.circle
            var rangle = 0
            setInterval(() => {
                rangle += (Math.PI * 2) / (60 * 10)
                circle.style.transform = `
                translateX(${Math.sin(rangle)*100}px)
                translateY(${Math.cos(rangle)*100}px)
                `
            }, 1000 / 60)
        },
        methods: {

        }

    }
</script>

<style scoped>
    .package {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 400px;
        height: 400px;
    }

    .package p {
        /* 绝对定位+位置设置flex下无作用 */
        /* 但是注意如果知识有一个position:absolute,那么flex还是有效的状态 */
        position: absolute;
        bottom: 0px;
        left: 0;
        right: 0;
    }

    .circleTrack {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        border: 1px solid #000
    }

    .circle {
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background: red;
        /*只要设置比半径大即可可以用px具体数值，也可以用百分比%都可以  */
    }
</style>